<script setup lang="ts">
import {getRightBottomData, rightBottom} from "@/api";
import SeamlessScroll from "@/components/seamless-scroll";
import {computed, onMounted, reactive, ref} from "vue";
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com";
import { ElMessage } from "element-plus";
import moment from "moment";
import ItemWrap from "@/components/item-wrap";
const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const title = ref("")
const state = reactive<any>({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 252,
    limitScrollNum: 3,
    // step:3
  },
  scroll: true,
});

const getData = () => {
  getRightBottomData({ limitNum: 20 })
    .then((res) => {
      console.log("右下", res);
      if (res.code) {
        for (let item of res.data) {
          const value = JSON.parse(item.statisticalValue);
          switch (item.type) {
            case "title":
              title.value = value.data;
              break;
            case "data":
              state.list = (value.data);
              break;
          }
        }

      } else {
        ElMessage.error(res.msg)
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};

const comName = computed(() => {
  if (indexConfig.value.rightBottomSwiper) {
    return SeamlessScroll;
  } else {
    return EmptyCom;
  }
});

const handleAddress = (item: any) => {
  return item.location;
};
onMounted(() => {
  getData();
});
</script>

<template>
  <item-wrap :title='title'  style="height: 40px;" ></item-wrap>

  <div class="right_bottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">

      <table class="right-bottom-table">
        <thead>
        <tr>
          <th>违规对象</th>
          <th>违规类型</th>
          <th>违规时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, i) in state.list" :key="i">
          <td :title="handleAddress(item)">
            {{ item.plate_no}}
          </td>
          <td>
            {{ item.rule_name || "无" }}
          </td>
          <td>
            {{ moment(item.create_time).format("YYYY-MM-DD") }}
          </td>
        </tr>
        </tbody>
      </table>
<!--    </component>-->
  </div>
</template>

<style scoped lang="scss">

.right-bottom-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  table-layout: fixed; /* 固定表格布局 */
  thead {
    position: sticky;
    top: 0;
    background-color: #1a1a1a; /* 设置具体背景色 */
    z-index: 10;
  }
  th {
    padding: 10px;
    text-align: left;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  td {
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    &.warning {
      color: #e6a23c;
    }
  }

  tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
}


.right_bottom_wrap {
  margin-top: 10px;
  overflow: hidden;
  width: 100%;
  height: 90%;
  background-color: #04102d90;

}

.overflow-y-auto {
  overflow-y: auto;
}
.right_bottom {
  width: 100%;
  height: 90%;
}

.right_bottom_wrap {
  width: 100%;
  height: calc(100% - 40px); // 减去标题高度
  overflow: hidden;

  &.overflow-y-auto {
    overflow-y: auto;
  }
}

.right-bottom-table {
  width: 100%;
  // 添加最小宽度以确保表格可滚动
  min-width: 100%;
}

</style>
